<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>ios11.1.2的iphoneX下输入框被遮盖</title>
        <script>
            !function(t,e){var n=t.documentElement,i="orientationchange"in window?"orientationchange":"resize",o=function(){var t=n.clientWidth,e=750;t&&(t>=e?n.style.fontSize="100px":n.style.fontSize=100*(t/e)+"px")};o(),t.addEventListener&&(e.addEventListener(i,o,!1),t.addEventListener("DOMContentLoaded",o,!1))}(document,window);
        </script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
            }
          .container {
            height: 100%;
            display: flex;
            flex-direction: column;
          }
          .header {
            height: 50px;
          }
          .main {
            flex: 1;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
          }
          .wrapper{
            height: 100%;
          }
          .footer {
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flex;
            display: -o-flex;
            display: flex;
            height: 50px;
            align-items: center;
            justify-content: center;
          }
          .footer input{
            -webkit-flex: 1;
            -moz-flex: 1;
            -ms-flex: 1;
            -o-flex: 1;
            flex: 1;
          }
          .footer button{
            height:30px;
            margin:0 10px;
          }
        </style>
    </head>
    <body>
          <div class="container">
            <div class="header"></div>
            <div class="main">
                <div class="wrapper">
                    <p>怎样使iphoneX中的输入框不被遮盖</p>
                </div>
            </div>
            <div class="footer">
                <input type="text" name="" id="" placeholder="你可以输入你想说的话与大家一起交流" />
                <button>发送</button>
            </div>
          </div>
        
        <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
            var $inputEle = $('#inputEle');
            var $footer = $('footer');
            var $boxTip = $('#box-tip');
            var $tipInfo = $('#tipInfo');
            var inputEle = document.getElementById('inputEle');
            let Width = window.innerWidth,
                Height = window.innerHeight,
                scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
            var str = 'scrollTop:'+document.body.scrollTop+';innerHeight'+window.innerHeight+';scrollHeight:'+document.body.scrollHeight;
            alert(str);
            //判断元素是否在可视区域，不在的话返回true, 在返回false
            function notInView() {
                // getBoundingClientRect 是获取定位的，很怪异, (iphone 6s 10.0 bate版表现特殊)
                // top: 元素顶部到窗口（可是区域）顶部
                // bottom: 元素底部到窗口顶部
                // left: 元素左侧到窗口左侧
                // right: 元素右侧到窗口左侧
                // width/height 元素宽高
                   let bottom = $footer.get(0).getBoundingClientRect().bottom;
               // alert('bottom:'+bottom+';innerHeight'+window.innerHeight)
                   // 可视区域高度 - 元素底部到窗口顶部的高度 < 0, 则说明被键盘挡住了
                if (window.innerHeight - bottom < 0) {
                    return true
                }
                return false
            }
            $inputEle.focus(function(){
                interval = setInterval(function(){
                    // 1.该区域为空时，输入框在ios中的表现为，输入文字再点击输入框被遮盖，再点击输入框，输入框才会出现在输入法的上面
                    document.body.scrollTop = document.body.scrollHeight;// 2.iphone6,ios10.3.2测试无问题
                    // $footer.css('bottom',document.body.scrollTop);// 3.ios中输入框跑到头部，不能紧挨输入法
                })
                setTimeout(() => {
                    var nScrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
                    $tipInfo.text('scrollHeight:'+scrollHeight+';nScrollHeight'+nScrollHeight+';scrollTop:'+document.body.scrollTop+';innerHeight:'+window.innerHeight).parent().parent().css('display','table');
                    interval && clearInterval(interval)
                }, 600)
                
            }).blur(function(){
                if(interval){
                     $footer.css('bottom',0);
                    clearInterval(interval)
                }
                // $tipInfo.text('').parent().parent().hide()
            })
            // android, 键盘弹起/收回会触发resize事件
            // window.onresize = function () {
            //     alert('Height:'+Height+';innerHeight'+window.innerHeight)
            //     // Height: 键盘没有弹出时window.innerHeight
            //     if (Height == window.innerHeight) {
            //         $footer.css({'top': window.innerHeight + 'px','bottom':'initial'})
            //     }
            // }
        </script>
    </body>
</html>